<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="UTF-8">
    <title>Login</title>
</head>

<body>
    <div class="container">
        <br />
        <div class="row">
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'></div>
            <div class='col'><button type="submit" class="form-control btn btn-info" id='logout'>logout</button></div>
        </div>
        <br />
        <br />
        <br />   
        <nav class="nav nav-pills nav-justified">
            <a class="nav-item nav-link" href="main.html">任务管理</a>
            <a class="nav-item nav-link active" href="client.html" id='client-manage'>接入子系统管理</a>
            <a class="nav-item nav-link" href="user.html" id="user-manage">用户管理</a>
            <a class="nav-item nav-link" href="history.html">任务运行历史</a>
          </nav>
        <br />
        <hr />
        <br />
        <form id='client-submit'>
            <div class="form-row">
              <div class="col-md-4 mb-3">
                <label for="systemId">系统ID</label>
                <input type="text" class="form-control" id="systemId" name='systemId' required>
                <div class="valid-feedback">
                  Looks good!
                </div>
              </div>
              <div class="col-md-4 mb-3">
                <label for="systemName">系统名称</label>
                <input type="text" class="form-control" id="systemName" name="systemName" required>
              </div>           
            </div>       
            <button class="btn btn-primary" type="submit" id='submit'>Submit form</button>
        </form>
</body>
<script src="script/jquery-3.0.0.min.js"></script>
<script src="script/util.js"></script>
<script>
'use strict';
(function(){
    var url = new URL(window.location.href);
    var id = url.searchParams.get('id');
    if(id) {
        $.ajax({
            url:'/admin/client-info/detail/' + id,
            beforeSend: function(request) {
                request.setRequestHeader("OPERATOR-ID", username);
                request.setRequestHeader("LOGIN-TOKEN", token);
            },
            type:"GET",
            contentType:"application/json; charset=utf-8",
            dataType:"json",
            success: function(response) {
                if(response.code === 304) {
                    login();
                }else if(response.code === 200) {
                    var taskInfo = response.data;
                    $('#systemId').val(response.data.systemId);
                    $('#systemName').val(response.data.systemName);                    
                }else {
                    alert(response.message);
                }
                
            }
        });
    }

    $('#client-submit').submit(function(e) {
        e.preventDefault();
        var data = {
            idTaskInfo: id,
            systemId: $('#systemId').val(),
            systemName: $('#systemName').val()                 
        };
        $.ajax({
            url:'/admin/client-info/save',
            beforeSend: function(request) {
                request.setRequestHeader("OPERATOR-ID", username);
                request.setRequestHeader("LOGIN-TOKEN", token);
            },
            type:"POST",
            data: JSON.stringify(data),
            contentType:"application/json; charset=utf-8",
            dataType:"json",
            success: function(response) {
                if(response.code === 304) {
                    login();
                }else if(response.code === 200) {
                    window.location.href = 'client.html';
                }else {
                    alert(reponse.message);
                }
                
            }
        });
    })

   //bottom     
})();
</script>
</html>